<template>
  <!--加签流程-->
      <el-dialog :z-index="100" title="addSignTitle" @cancel="addSignOpen = false"
               v-model="addSignOpen" :width="'40%'" append-to-body>
        <template #header>
          <span>{{ addSignTitle }}</span>
        </template>
        <el-form ref="addSignForm" :model="addSignForm" label-width="160px">
          <el-form-item label="加签类型" prop="addSignType" :rules="[{ required: true, message: '请选择加签类型', trigger: 'blur' }]">
            <el-radio-group v-model="addSignType" @change="changeAddSignType">
                <el-radio :value = "0" >前加签</el-radio>
                <el-radio :value = "1" >后加签</el-radio>
                <el-radio :value = "2" >多实例加签</el-radio>
            </el-radio-group>
          </el-form-item>

        </el-form>

      </el-dialog>

      <el-radio-group v-model="radioValue" @change="handleRadioChange">
          <el-radio :label="1">备选项1</el-radio>
          <el-radio :label="2">备选项2</el-radio>
          <el-radio :label="3">备选项3</el-radio>
        </el-radio-group>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const addSignOpen = ref(true) //前加签
const addSignTitle = ref('')  //加签标题
const addSignType = ref(0) //加签类型
const addSignForm = ref({
    multiple: true,
    comment: "", // 意见内容
    commentFileDto: { //意见里的附件
      type: '',
      fileurl: ''
    },
    procInsId: "", // 流程实例编号
    taskId: "", // 流程任务编号
    vars: "",
    targetKey: "",
    addSignUsers: "", //委托加签人员
    addSignType: 0, //加签类型
  })

const changeAddSignType = (val: any) => {
    addSignType.value = val;
    if(addSignType.value === 0) {
      addSignTitle.value = "前加签流程";
    }
    if(addSignType.value === 1) {
      addSignTitle.value = "后加签流程";
    }
    if(addSignType.value === 2) {
      addSignTitle.value = "多实例加签流程";
    }
    console.log("changeAddSignType =",val);
    console.log("addSignForm.addSignType =",addSignType.value);
    console.log("addSignTitle.value =",addSignTitle.value);
  }

  const radioValue = ref(1);

  const handleRadioChange = (value: any) => {
    console.log('当前选中的值：', value);
    // 这里可以执行其他逻辑
  };
</script>

